<template>
  <view
    class="spring-container"
    :style="{
      backgroundImage: `url(${
        [0, 1].includes(decodedData.pageType)
          ? oss2('others/ChunAo/MTQ_bg.png')
          : oss2('others/ChunAo/QW_bg.png')
      })`,
    }"
  >
    <image
      :src="oss2('others/ChunAo/logo.png')"
      class="w-117px h-52.5px logo"
    />

    <!-- 验签弹窗 -->
    <view
      v-if="signCheck"
      class="signature-fail"
      :style="{
        backgroundImage: `url(${oss2('others/ChunAo/MTQ_tanchaung2.png')})`,
      }"
    >
      <view class="signature-close" @click="close"></view>
      <view class="signature-backBtn w-222px h-44px">
        <image :src="oss2('others/ChunAo/btn5.png')" />
      </view>
    </view>

    <!-- 前往美团查看/领取 -->
    <template v-if="[2, 3].includes(decodedData.pageType) && !signCheck">
      <view class="w-375px mt-80px">
        <view class="toMeiTuan_text">
          <image
            :src="
              decodedData.pageType === 2
                ? oss2('others/ChunAo/type.png')
                : oss2('others/ChunAo/type2.png')
            "
          />
        </view>

        <view class="toMeiTuan_btn" @click="toMeiTuan">
          <image :src="oss2('others/ChunAo/Button2.png')" />
        </view>
      </view>
    </template>

    <view
      class="fillInfo"
      v-if="[0, 1].includes(decodedData.pageType) && !signCheck"
    >
      <view
        class="fillInfo-bg"
        :style="{
          backgroundImage: `url(${oss2('others/ChunAo/tk_pic2.png')})`,
        }"
      >
        <view class="fillInfo-content">
          <image
            class="fillInfo-close"
            :src="oss2('others/ChunAo/close.png')"
            @click="close"
          ></image>
          <image
            class="fillInfo-titleImg"
            :src="oss2('others/ChunAo/slogan2.png')"
          />

          <view class="fillInfo-submitInfo">
            <view class="submitInfo_item">
              <image
                class="w-47px h-18px mr-3px"
                :src="oss2('others/ChunAo/title1.png')"
              />
              <view
                class="submitInfo_input"
                :class="shineLabel === 'name' ? 'shine' : ''"
              >
                <input
                  class="h-30px"
                  :disabled="isEdit"
                  maxlength="10"
                  type="text"
                  @blur="nameBlur"
                  v-model="form.name"
                  placeholder="名字"
                  placeholder-style="color: #A08E8E"
                />
              </view>
            </view>

            <view class="submitInfo_item">
              <image
                class="w-47px h-18px mr-10.5px"
                :src="oss2('others/ChunAo/title2.png')"
              />

              <view
                class="submitInfo_input"
                :class="shineLabel === 'phone' ? 'shine' : ''"
              >
                <text>+86</text>
                <input
                  v-model="form.phone"
                  :disabled="isEdit"
                  maxlength="11"
                  @blur="phoneBlur"
                  type="tel"
                  class="w-140px h-30px ml-5px"
                  placeholder-style="color: #A08E8E"
                />
              </view>
            </view>

            <view class="submitInfo_item">
              <image
                class="w-47px h-18px mr-10.5px"
                :src="oss2('others/ChunAo/title3.png')"
              />
              <view
                class="submitInfo_input"
                :class="shineLabel === 'site' ? 'shine' : ''"
              >
                <picker
                  mode="region"
                  :disabled="isEdit"
                  :value="form.site"
                  @change="locationChange($event)"
                >
                  <input
                    class="h-30px"
                    :disabled="true"
                    v-model="form.site"
                    placeholder="省、市、区/街道"
                    placeholder-style="color: #A08E8E"
                  />
                </picker>
              </view>
            </view>

            <view class="submitInfo_item" style="align-items: flex-start">
              <image
                class="w-63px h-18px"
                :src="oss2('others/ChunAo/title4.png')"
              />
              <view
                class="submitInfo_input"
                style="line-height: 18px"
                :class="shineLabel === 'description' ? 'shine' : ''"
              >
                <textarea
                  class="h-69px"
                  v-model="form.description"
                  :disabled="isEdit"
                  maxlength="50"
                  @blur="descriptionBlur"
                  placeholder="如小区门牌号等"
                  placeholder-style="color: #A08E8E"
                />
              </view>
            </view>

            <!-- 编辑 -->
            <template v-if="isEdit">
              <view class="submitInfo_text">点击确认后将不可更改</view>

              <view class="submitInfo_btn">
                <image
                  class="w-100px h-38px"
                  @click="isEdit = false"
                  :src="oss2('others/ChunAo/btn3.png')"
                />
                <image
                  @click.stop="submit"
                  class="w-100px h-38px"
                  :src="oss2('others/ChunAo/btn4.png')"
                />
              </view>
            </template>

            <template v-else>
              <view class="submitInfo_text2"
                >请在获得奖品的7个工作日内填写正确的收件信息，以便奖品及时寄送，否则视为弃奖</view
              >
              <view class="siteBtn">
                <button
                  class="wechat w-100px h-38px"
                  @click.stop="onChooseWechatAddress"
                >
                  <image
                    class="w-100px h-38px"
                    :src="oss2('others/ChunAo/btn2.png')"
                  />
                </button>
              </view>
            </template>
          </view>
        </view>
      </view>

      <view class="fillInfo-submitBtn" v-if="!isEdit">
        <image :src="oss2('others/ChunAo/Button1.png')" @click="submitRule" />
      </view>
    </view>
  </view>
</template>
  <script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { oss2, message, debounce } from "@/utils/utils";

import { rewardLogCreate, rewardLogQuery } from "@/services/utils";

const queryInfo = ref({});
const form = reactive({
  name: "",
  phone: "",
  site: "",
  description: "",
});
const decodedData = ref({});
const signCheck = ref(false);
const isEdit = ref(false);
const shineLabel = ref("");

onLoad(async (options) => {
  getApp().accessLogAdd();
  if (!options.data)
    return uni.switchTab({
      url: "/pages/home/home",
    });

  queryInfo.value = options;
  console.log(options, uni.getLaunchOptionsSync());
  decodedData.value = JSON.parse(decodeURIComponent(queryInfo.value.data));
  console.log(decodedData.value);

  if ([2, 3].includes(decodedData.value.pageType)) return;
  const res = await rewardLogQuery({
    winningId: decodedData.value.winningId,
    activityId: decodedData.value.activityId,
  });
  if (res?.code === 200 && res.data.activityId) {
    message("已被领取!");
    uni.switchTab({
      url: "/pages/home/home",
    });
  }
});

// 从微信选择地址添加
const onChooseWechatAddress = () => {
  console.log(1111111111);
  uni.chooseAddress({
    success: async (result) => {
      console.log(result);
      const {
        telNumber,
        userName,
        provinceName,
        cityName,
        countyName,
        detailInfo,
      } = result;
      form.name = userName;
      form.phone = telNumber;
      form.site = provinceName + cityName + countyName;
      form.description = detailInfo;
    },
    fail: (err) => {
      console.log(err);
    },
  });
};

const toMeiTuan = () => {
  console.log(decodedData.value);
  if (decodedData.value.pageType === 2) {
    uni.navigateToMiniProgram({
      appId: "wxde8ac0a21135c07d",
      path: "index/pages/h5/h5?weburl=https%3A%2F%2Fcube.meituan.com%2Fcube%2Fblock%2F12eda52d5486fdbb7358%2F214940%2Findex.html&f_openId=1&f_token=1&noshare=1",
    });
    getApp().emdlz(
      "track",
      "event",
      "oreo_spring_view_page",
      "click",
      "view_now",
      ""
    );
  } else {
    uni.navigateToMiniProgram({
      appId: "wxde8ac0a21135c07d",
      path: "index/pages/h5/h5?weburl=https%3A%2F%2Fcube.meituan.com%2Fcube%2Fblock%2Ff7e8a04a1fb6%2F214897%2Findex.html&f_openId=1&f_token=1&noshare=1",
    });
    getApp().emdlz(
      "track",
      "event",
      "oreo_spring_receive_page",
      "click",
      "receive_now",
      ""
    );
  }
};

const locationChange = (e) => {
  form.site = e.detail.value.join("");
};

const close = () => {
  uni.redirectTo({
    url: "/campaign/pages/spring/index",
  });
};

const nameBlur = () => {
  var flag = new RegExp(
    "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
  );
  if (flag.test(form.name) && form.name.length < 10) {
    message("请输入10字以内!");
    shineLabel.value = "name";
    setTimeout(() => {
      shineLabel.value = "";
    }, 5000);
  }
};

const phoneBlur = () => {
  if (
    !/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/.test(
      form.phone
    )
  ) {
    message("请输入正确的手机号!");
    shineLabel.value = "phone";
    setTimeout(() => {
      shineLabel.value = "";
    }, 5000);
  }
};

const descriptionBlur = () => {
  form.description;
  if (form.description.length < 5 || form.description.length > 50) {
    message("请输入5~50字以内的地址!");
    shineLabel.value = "description";
    setTimeout(() => {
      shineLabel.value = "";
    }, 5000);
  }
};

const submitRule = () => {
  var flag = new RegExp(
    "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
  );
  if (form.name === "" || (flag.test(form.name) && form.name.length < 10)) {
    message("请填写完整的收件信息!");
    shineLabel.value = "name";
    setTimeout(() => {
      shineLabel.value = "";
    }, 5000);
  } else {
    if (
      form.phone === "" ||
      !/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/.test(
        form.phone
      )
    ) {
      message("请填写完整的收件信息!");
      shineLabel.value = "phone";
      setTimeout(() => {
        shineLabel.value = "";
      }, 5000);
    } else {
      if (form.site === "") {
        message("请填写完整的收件信息!");
        shineLabel.value = "site";
        setTimeout(() => {
          shineLabel.value = "";
        }, 5000);
      } else {
        if (
          form.description === "" ||
          form.description.length < 5 ||
          form.description.length > 50
        ) {
          message("请填写完整的收件信息!");
          shineLabel.value = "description";
          setTimeout(() => {
            shineLabel.value = "";
          }, 5000);
        } else {
          isEdit.value = true;
        }
      }
    }
  }
};

const submit = debounce(
  async () => {
    const res = await rewardLogCreate({
      ...queryInfo.value,
      ...{ receiverInfo: JSON.stringify(form) },
    });

    if (res.code === 200) {
      message("领取成功!");
      setTimeout(() => {
        uni.redirectTo({
          url: `/campaign/pages/spring/index?winningId=${decodedData.value.winningId}&activityId=${decodedData.value.activityId}&rewardId=${decodedData.value.rewardId}`,
        });
      }, 1000);
    } else {
      message("领取失败!");
    }

    // uni.request({
    //   url: `https://open-scrm2-uat.emdlz.com.cn/rest/reward-log/create`,
    //   method: "post",
    //   data: {
    //     ...fromData,
    //   },
    //   header: {
    //     "X-App-Key": "kldFGQpgabMi8bkol56KLqTJYkeRXU",
    //   },
    //   success: (res) => {
    //     console.log(res);
    //     if (res.data.code === 200) {
    //       message("领取成功!");
    //     } else if (res.data.code === 422) {
    //       message("已领取!");
    //     }
    //   },
    //   fail: (err) => reject(err.errMsg),
    // });

    // const res = await rewardlogCreate({});
  },
  500,
  false
);
</script>
  
<style lang="less" scoped>
.spring-container {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  .logo {
    position: absolute;
    top: 20px;
    left: 18.5px;
  }

  .signature-fail {
    width: 100%;
    height: 323px;
    position: relative;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 260px;
    .signature-close {
      position: absolute;
      width: 31px;
      height: 31px;
      top: 16px;
      right: 20px;
    }

    .signature-backBtn {
      position: absolute;
      bottom: 0px;
      left: 80.5px;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .spring-Meituan {
    position: absolute;
    top: 188px;
    width: 100%;
    height: 381px;
    .Meituan-content {
      width: 100%;
      height: 381px;
      image {
        width: 100%;
        height: 100%;
      }
      .Meituan-close {
        position: absolute;
        width: 31px;
        height: 31px;
        top: 16px;
        right: 20px;
      }
    }

    .Meituan-btn {
      position: absolute;
      top: 377.5px;
      left: 109px;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .toMeiTuan_text {
    width: 284px;
    height: 34.5px;
    margin: 0 auto;
    margin-bottom: 325px;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .toMeiTuan_btn {
    width: 254px;
    height: 72px;
    margin: 0 auto;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .fillInfo {
    width: 100%;
    height: 100%;
    position: relative;
    .fillInfo-bg {
      width: 100%;
      height: 473px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100% 100%;

      .fillInfo-content {
        width: 100%;
        height: 473px;
        box-sizing: border-box;
        padding: 31.5px 57.5px;
        position: relative;
      }

      .fillInfo-titleImg {
        width: 100%;
        height: 112px;
      }

      .fillInfo-close {
        position: absolute;
        width: 31px;
        height: 31px;
        top: -31rpx;
        right: 20px;
      }
      .fillInfo-submitInfo {
        .submitInfo_item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 12px;
          .submitInfo_input {
            width: 193px;
            background-color: rgba(211, 135, 158, 0.21);
            border-radius: 7px;
            font-size: 12px;
            padding: 0px 14.5px;
            color: #333;
            line-height: 30px;
            box-sizing: border-box;
            display: flex;

            textarea {
              padding: 8.5px 0;
            }
          }
        }

        .submitInfo_text {
          font-size: 31rpx;
          margin-top: 14.5px;
          font-family: FZCuYuan-M03S;
          font-weight: 400;
          color: #fa7586;
          line-height: 39rpx;
          text-align: center;
        }

        .submitInfo_text2 {
          font-size: 11px;
          margin-top: 7.5px;
          margin-bottom: 7.5px;
          font-family: FZCuYuan-M03S;
          font-weight: 400;
          color: #fa7586;
          line-height: 14px;
          text-align: center;
        }

        .submitInfo_btn {
          display: flex;
          justify-content: space-evenly;
          margin-top: 10px;
        }

        .siteBtn {
          width: 100%;
          .wechat {
            border: none;
            padding: 0;
            margin: 0 auto;
            background-color: transparent;
          }
        }
      }
    }

    .fillInfo-submitBtn {
      width: 254px;
      height: 72px;
      margin-top: 17.5px !important;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.shine {
  animation: shine 5s linear;
}

@keyframes shine {
  0% {
    box-shadow: 0 0 18px rgba(211, 135, 158, 0);
  }
  25% {
    box-shadow: 0 0 18px rgba(211, 135, 158, 1);
  }
  50% {
    box-shadow: 0 0 18px rgba(211, 135, 158, 0);
  }
  75% {
    box-shadow: 0 0 18px rgba(211, 135, 158, 1);
  }
  100% {
    box-shadow: 0 0 18px rgba(211, 135, 158, 0);
  }
}
</style>